<template>
  <div class="setting">
    <div class="content" :style="{minHeight:(fullHeight-46) +'px' }">
      <div
        class="user-box clearfix"
        :style="{backgroundImage: 'url(' + coverImgUrl + ')', backgroundSize:'cover'}"
      >
        <div class="user-info">
          <van-row>
            <van-col span="6">
              <div class="user-img-box">
                <van-image width="60px" height="60px" fit="fill" radius="5" :src="user.userImg" />
              </div>
            </van-col>
            <van-col span="18">
              <p class="user-username">{{user.userName}}</p>
            </van-col>
          </van-row>
        </div>
      </div>

      <div class="opt-list">
        <van-cell-group>
          <van-cell title="修改用户信息" is-link @click="userDetail" />
          <van-cell title="编辑聊天背景" is-link @click="userDetail" />
          <van-cell title="修改头像">
            <template #right-icon>
              <van-tag round type="success" size="medium" @click="updateUserImg">上传</van-tag>
            </template>
          </van-cell>
        </van-cell-group>
        <div class="opt-send">
          <van-cell-group>
            <van-cell>
              <template #title>
                <div class="opt-send-box">
                  <van-button
                    style="width: 148px"
                    icon="exchange"
                    round
                    plain
                    type="info"
                    size="small"
                    @click="logout"
                  >退出登录</van-button>
                </div>
              </template>
            </van-cell>
          </van-cell-group>
        </div>
      </div>
    </div>

    <Menu />
  </div>
</template>

<script>
import Menu from "../components/Menu";
import userBg from "@/assets/myuser-bg.jpg";
import { mapState } from "vuex";

export default {
  name: "Setting",
  components: {
    Menu
  },
  data() {
    return {
      coverImgUrl: userBg,
      fullWidth: document.documentElement.clientWidth,
      fullHeight: document.documentElement.clientHeight
    };
  },
  methods: {
    /**
     * 动态获取浏览器宽高
     */
    handleResize() {
      this.fullWidth = document.documentElement.clientWidth;
      this.fullHeight = document.documentElement.clientHeight;
    },
    //删除好友
    updateUserImg() {
      this.$toast("抱歉，未开通权限!");
    },
    //用户详情
    userDetail() {
      this.$toast("抱歉，未开通权限!");
    },
    //退出登录
    logout() {
      this.$dialog
        .confirm({
          message: "退出登录后，将清空聊天记录和用户信息！",
          showCancelButton: true,
          confirmButtonText: "确定",
          confirmButtonColor: "#1989fa"
        })
        .then(() => {
          this.$router.push("/home");
        })
        .catch(() => {});
    }
  },
  computed: {
    ...mapState(["user"])
  },
  created() {
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy: function() {
    window.removeEventListener("resize", this.handleResize);
  }
};
</script>

<style lang="scss" scoped>
.setting {
  width: 100%;

  .content {
    width: 100%;
    background-color: #f9f9f9;

    .clearfix::before,
    .clearfix::after {
      content: "";
      display: table;
      clear: both;
    }

    .user-box {
      width: 100%;
      height: 150px;

      .user-info {
        width: 100%;
        height: 60px;
        margin-top: 110px;
        background-color: rgba(0, 0, 0, 0);

        .user-img-box {
          height: 60px;
          width: 60px;
          margin: auto;
          border-radius: 5px;
        }

        .user-username {
          margin-top: 10px;
          margin-bottom: 0;
          font-size: 24px;
          font-weight: 500;
          color: #ffffff;
        }
      }
    }

    .opt-list {
      width: 100%;
      margin-top: 57px;

      .opt-send {
        margin-top: 20px;

        .opt-send-box {
          text-align: center;
        }
      }
    }
  }
}
</style>